<script setup>
import * as echarts from 'echarts';
import vChart from 'vue-echarts'

import { onMounted, reactive } from 'vue';
import { getCharts } from '@/api/apis/home';
//饼图
const pieOptions = reactive({
    tooltip: {
        trigger: "item",
    },
    legend: {
        orient: 'horizontal',

        top: 'top'
    },
    color: [
        "#0f78f4",
        "#dd536b",
        "#9462e5",
        "#a6a6a6",
        "#e1bb22",
        "#39c362",
        "#3ed1cf",
    ],
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [

            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})
//获取数据
const getChartsdata = async () => {
    const res = await getCharts()
    pieOptions.series[0].data = res.videoData

}
onMounted(() => getChartsdata())
</script>
<template>
    <el-card style="height:280px;padding:0px; " shadow="hover">
        <v-chart class="b1chart" :option="pieOptions" :autoresize="true" style="width: 100%; height: 280px"></v-chart>
    </el-card>
</template>
<style lang="less" scoped>
.el-card {
    margin-top: 10px;
}
</style>
